<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
		/>
		<title>img-previewer</title>
		<link rel="stylesheet" href="../dist/index.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
				/* outline: 1px solid #74ebd5; */
			}
			body {
				height: 100%;
				width: 100%;
				overflow: auto;
			}
			.banner {
				height: 300px;
				width: 100%;
				background: #74ebd5; /* fallback for old browsers */
				background: -webkit-linear-gradient(to right, #155b95, #16955c); /* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(
					to right,
					#155b95,
					#16955c
				); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
				color: #fff;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.banner p {
				color: #f1f1f1;
				margin-top: 15px;
			}
			.banner a {
				margin-top: 15px;
				display: inline-block;
				color: #fff;
				border: 1px solid #f1f1f1;
				padding: 7.5px 15px;
				border-radius: 4px;
				text-decoration: none;
				cursor: pointer;
			}
			.banner a:hover {
				border: 1px solid #c3c3c3;
				color: #c3c3c3;
			}
			.container {
				width: 1000px;
				margin: 0 auto;
				color: #606c71;
			}
			.container h2 {
				font-weight: 500;
				color: #159957;
				margin-top: 25px;
			}
			.container p {
				margin: 7.5px 0;
				line-height: 1.5;
			}

			.container ol {
				margin-top: 15px;
			}
			.container ol,
			.container li {
				line-height: 1.5;
				list-style-position: inside;
			}
			.container pre {
				padding: 15px 10px;
				text-align: left;
				background: #f1f1f1;
				border-radius: 4px;
				margin-top: 15px;
			}
			#app {
				width: 100%;
				-webkit-column-count: 4;
				-moz-column-count: 4;
				column-count: 4;
				-webkit-column-gap: 15px;
				-moz-column-gap: 15px;
				column-gap: 15px;
			}
			#app img {
				width: 100%;
				margin: 6px 0;
			}
			#add,
			#play {
				margin-bottom: 10px;
				margin-top: 15px;
				display: inline-block;
				border: 1px solid #f1f1f1;
				padding: 7.5px 15px;
				border-radius: 4px;
				text-decoration: none;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="banner">
			<div>
				<h1>img-previewer</h1>
				<p>轻量且强大的 javascript 图片预览插件</p>
				<a href="https://github.com/yue1123/img-previewer/blob/main/README.zh_cn.md">gitHub API文档</a>
			</div>
		</div>
		<div class="container">
			<h2>img-previewer</h2>
			<p>
				轻量且强大的 javascript
				图片预览插件,丝滑的动画让你可以优雅的预览你的网站中的图片。开箱即用,你无需多余的配置(默认情况下)或改变页面 html
				代码结构,即可在任何类型的网站中轻松启用该插件,升级你的用户体验
			</p>
			<p>提供了这些功能:</p>
			<ol>
				<li>丝滑的可打断过渡动画</li>
				<li>鼠标滚轮缩放图片</li>
				<li>图标拖动图片</li>
				<li>上一张&下一张</li>
				<li>快捷键支持</li>
				<li>移动端手势(双指放大)支持</li>
				<li>多语言国际化支持</li>
				<li>图片加载监听</li>
			</ol>
			<h2>安装</h2>
			<pre><code>npm i img-previewer</code></pre>
			<h2>simple demo</h2>
			<p>可动态的更新图片列表</p>
			<button id="add">添加一张</button>
			<button id="play">播放幻灯片</button>
			<div id="app">
				<img src="./img/pexels-photo-1172064.jpeg" alt="" />
				<img src="./img/pexels-photo-210307.jpeg" alt="" />
				<img src="./img/pexels-photo-347145.jpeg" alt="" />
				<img src="./img/pexels-photo-358238.jpeg" alt="" />
				<img src="./img/pexels-photo-53893.jpeg" alt="" />
				<img src="./img/pexels-photo-1658967.jpeg" alt="" />
				<img src="./img/pexels-photo-620337.jpeg" alt="" />
				<img src="./img/pexels-photo-994605.jpeg" alt="" />
				<img src="./img/pexels-photo-1006121.jpeg" alt="" />
			</div>
		</div>

		<script src="../dist/img-previewer.min.js"></script>
		<script>
			const a = new ImgPreviewer('#app', {
				scrollbar: true,
				ratio: 0.7,
				imageZoom: {
					step: 1
				},
				style: {
					modalOpacity: 0.8
				},
				bubblingLevel: 1,
				onHide() {
					clearInterval(timer)
				}
			})
			let timer = null
			function play() {
				timer && clearInterval(timer)
				let index = 0
				a.show(index)
				timer = setInterval(() => {
					if (index < a.getTotalIndex()) {
						index++
					} else {
						index = 0
					}
					a.show(index)
				}, 2000)
			}

			function add() {
				let img = document.createElement('img')
				img.src = `https://picsum.photos/500/500?random}`
				img.onload = function () {
					document.getElementById('app').appendChild(img)
					a.update()
				}
			}
			document.getElementById('add').onclick = add
			document.getElementById('play').onclick = play
		</script>
	</body>
</html>
